<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="45%"
    top="13vh"
    :before-close="closeHandle"
    :close-on-click-modal="false">
    <el-descriptions size="medium">
      <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
      <el-descriptions-item label="所属部门">
        {{ user.deptName }}
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="user.status === 0 ? 'success' : 'danger'">
          {{ user.status | parseUserStatus }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">{{ user.phone }}</el-descriptions-item>
      <el-descriptions-item label="邮箱号">{{ user.email }}</el-descriptions-item>
      <el-descriptions-item label="登录别名">{{ user.loginName }}</el-descriptions-item>
    </el-descriptions>

    <div v-show="!optType">
      <!-- 分割线 -->
      <el-divider content-position="center">风控内容</el-divider>
      <el-descriptions :column="1" size="medium">
        <el-descriptions-item label="风控类型">{{ userRisk.riskType | parseRiskType }}</el-descriptions-item>
        <el-descriptions-item label="风控原因">{{ userRisk.riskReason }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-form :model="userRiskForm" :rules="userRiskRules" ref="userRiskForm" label-width="85px" >
      <el-form-item :label="optType ? '风控原因' : '解除理由'" prop="word">
        <el-input
          v-model="userRiskForm.word"
          type="textarea"
          rows="4"
          maxlength="250"
          resize="none"
          show-word-limit
          placeholder="请输入内容">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button v-show="optType" :disabled="buttonLoad" type="primary" @click="saveUserRiskHandle">禁用</el-button>
      <el-button v-show="!optType" :disabled="buttonLoad" type="primary"  @click="updateUserRiskHandle">解禁</el-button>
      <el-button @click="closeHandle(false)">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "user-risk",
    data() {
      return {
        // 弹出框显示状态[true-显示 false-关闭]
        visible: false,
        // 用户信息对象
        user: {
          // 用户id
          userId: undefined,
          // 用户所属部门名称
          deptName: undefined,
          // 用户名
          username: undefined,
          // 手机号
          phone: undefined,
          // 邮箱号
          email: undefined,
          // 登录别名
          loginName: undefined,
          // 用户状态[0-正常 1-禁用]
          status: ''
        },
        // 用户风控对象
        userRisk: {
          // 风控主键
          riskRecordId: undefined,
          // 风控类型
          riskType: undefined,
          // 风控描述
          riskReason: undefined,
        },
        // 用户风控/解除风控表单对象
        userRiskForm: {
          // 风控主键
          riskRecordId: undefined,
          // 用户id
          userId: undefined,
          // 风控/解除风控描述内容
          word: ''
        },
        // 弹出框标题
        dialogTitle: undefined,
        // 用户风控操作类型[true-用户风控 false-解除风控]
        optType: false,
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
        // 系统用户表单校验规则
        userRiskRules: {
          word: [
            { required: true, message: '输入内容不能为空', trigger: 'blur' }
          ],
        }
      }
    },
    filters: {
      /**
       * 用户状态枚举映射
       * @param value 用户状态值
       * @returns {string} 用户状态文字描述
       */
      parseUserStatus(value) {
        switch (value) {
          case 0:
            return '正常'
          case 1:
            return '禁用'
          default:
            return '未知状态'
        }
      },
      /**
       * 用户风控类型枚举映射
       * @param value 风控类型值
       * @returns {string} 用户风控类型文字描述
       */
      parseRiskType(value) {
        switch (value) {
          case 0:
            return '管理员操作'
          case 1:
            return '系统判定'
          default:
            return '未知风控类型'
        }
      }
    },
    methods: {
      // 初始化用户风控弹出框事件
      initDisableUserDialog(user, optType) {
        let _user = this.user
        for (let userKey in _user) {
          _user[userKey] = user[userKey]
        }
        this.optType = optType
        this.dialogTitle = optType ? '禁用用户' : '用户解禁'

        if (!optType) {
          // 初始化用户风控内容
          this.getUserRisk(user.userId)
        }
        this.visible = true;
      },
      /**
       * 初始化用户风控弹出框方法
       * @param {Object} userRisk 用户风控记录对象
       */
      initRemoveUserRiskDialog(userRisk) {

        this.getUser(userRisk.userId);

        let _userRisk = this.userRisk
        _userRisk.riskRecordId = userRisk.riskRecordId
        _userRisk.riskType = userRisk.riskType
        _userRisk.riskReason = userRisk.riskReason

        this.optType = false
        this.dialogTitle = '用户解禁'
        this.visible = true;
      },
      /**
       * 获取用户数据方法
       * @param {string} userId 用户主键
       */
      getUser(userId) {
        // 按钮不可点击
        this.buttonLoad = true
        this.$axios.$get('/sys/user/data', { params: { userId }})
          .then(({ data }) => {
            let _user = this.user
            for (let propKey in _user) {
              if (data.hasOwnProperty(propKey)) {
                _user[propKey] = data[propKey]
              }
            }
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 根据用户id，获取用户风控内容
       * @param {string} userId 用户id
       */
      getUserRisk(userId) {
        // 按钮不可点击
        this.buttonLoad = true

        this.$axios.$get('sys/user-risk/info', { params: { userId }})
          .then(({ data }) => {
            let userRisk = this.userRisk
            userRisk.riskRecordId = data.riskRecordId
            userRisk.riskType = data.riskType
            userRisk.riskReason = data.riskReason
          })
          .catch(() => {
            this.closeHandle(false)
          })
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 保存用户风控信息事件（禁用用户）
       */
      saveUserRiskHandle() {
        this.$refs.userRiskForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          let user = this.user
          this.$confirm(`您确定要禁用’${ user.username }‘用户吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let userRiskForm = this.userRiskForm
            userRiskForm.userId = user.userId
            this.$axios.$post('sys/user-risk/save', userRiskForm)
              .then(() => {
                this.notify('success', '操作成功', `禁止’${ user.username }‘用户成功`)

                this.closeHandle(true)
              })
              .catch(() => {})

          }).catch(() => {
            this.notify('info', '温馨提示', '已取消’禁止‘操作')
          });
        });
      },
      /**
       * 修改用户风控信息事件（解禁用户）
       */
      updateUserRiskHandle() {
        this.$refs.userRiskForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          let user = this.user
          this.$confirm(`您确定要解禁’${ user.username }‘用户吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let userRiskForm = this.userRiskForm
            userRiskForm.riskRecordId = this.userRisk.riskRecordId
            userRiskForm.userId = user.userId
            this.$axios.$post('sys/user-risk/cancel', userRiskForm)
              .then(() => {
                this.notify('success', '操作成功', `解禁’${ user.username }‘用户成功`)

                this.closeHandle(true)
              })
              .catch(() => {})

          }).catch(() => {
            this.notify('info', '温馨提示', '已取消’解禁‘操作')
          });
        });
      },
      // 弹出框关闭处理事件
      closeHandle(bool) {
        this.visible = false;
        // 清空用户对象信息
        let user = this.user
        user.userId = undefined
        user.username = undefined
        user.phone = undefined
        user.email = undefined
        user.loginName = undefined
        user.status = undefined
        // 清空用户风控对象信息
        let userRisk = this.userRisk
        userRisk.riskRecordId = undefined
        userRisk.riskType = undefined
        userRisk.riskReason = undefined
        // 清空用户风控表单对象信息
        let userRiskForm = this.userRiskForm
        userRiskForm.riskRecordId = undefined
        userRiskForm.userId = undefined
        userRiskForm.word = ''

        // 此处判断触发事件是否是弹出框自带关闭事件
        if (typeof bool === 'function') {
          bool = false
        }
        // 向上传递事件
        this.$emit('close-dialog', bool)
      },
    },
  }
</script>

<!--
  css字符对应

-->
<style scoped>

</style>
